<template>
  <div>
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @ready="initMap"
      @click="getClickInfo"
    >
      <!-- 地图视图 -->
      <bm-view :style="{ width: '100%', 'min-height': '450px', flex: 1 }" />
      <!--缩放控件-->
      <bm-navigation
        anchor="BMAP_ANCHOR_TOP_RIGHT"
        type="BMAP_NAVIGATION_CONTROL_ZOOM"
        :offset="{ width: 8, height: 40 }"
      />

      <!--地图类型控件-->
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_RIGHT"
      />
      <bm-marker
        :position="point"
        :icon="icon"
        :offset="{ width: 0, height: -10 }"
        :dragging="true"
        @dragend="onDragend"
      >
        <bm-label
          :content="longitude + ',' + latitude"
          :label-style="{
            backgroundColor: 'rgba(40, 40, 40, 0.7)',
            color: 'white',
            fontSize: '13px',
            borderRadius: '5px',
            borderColor: '#ccc',
            padding: '5px 10px',
          }"
          :offset="{ width: -35, height: 32 }"
        />
      </bm-marker>

      <bm-control :offset="{ width: '10px', height: '10px' }">
        <bm-auto-complete v-model="keyword" :sug-style="{ zIndex: 1 }">
          <el-input
            v-model="keyword"
            type="text"
            suffix-icon="el-icon-search"
            placeholder="请输入搜索关键字"
            class="serachinput"
          />
        </bm-auto-complete>
      </bm-control>
      <bm-local-search
        :keyword="keyword"
        :auto-viewport="true"
      />
    </baidu-map>
  </div>
</template>

<script>
import {
  BaiduMap,
  BmView,
  BmNavigation,
  BmMapType,
  // BmGeolocation,
  // BmControl,
  BmMarker,
  BmLabel,
  // BmInfoWindow,
  BmLocalSearch
  // BmAutoComplete,
} from 'vue-baidu-map'

export default {
  name: 'GridMap',
  components: {
    BaiduMap, // 地图容器
    BmView, // 地图视图
    BmNavigation, // 缩放控件
    BmMapType, // 地图类型控件
    // BmGeolocation, // 定位控件
    // BmControl, // 自定义控件
    BmMarker, // 点
    BmLabel, // 标签
    // BmInfoWindow, // 信息窗体
    BmLocalSearch // 地区检索
    // BmAutoComplete, // 自动填充
  },
  props: {
    longitude: {
      type: String,
      default: ''
    },
    latitude: {
      type: String,
      default: ''
    },
    isClickGetLngLat: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      zoom: 17,
      center: { lat: 22.822607, lng: 108.373454 },
      map: null,
      point: {},
      icon: {
        url: require('@/assets/map/location1.png'),
        size: { width: 35, height: 35 }
      },
      keyword: ''
    }
  },
  watch: {
    longitude: {
      handler(e) {
        this.getPoint()
        console.log('longitude=', e)
      }
    },
    latitude: {
      handler(e) {
        this.getPoint()
        console.log('latitude=', e)
      }
    }
  },
  methods: {
    initMap({ BMap, map }) {
      console.log('BMap：', BMap + '；' + 'map：', map)
      this.map = map
      this.map.setMapStyle({ style: 'normal' })

      // const geolocation = new BMap.Geolocation()
      // geolocation.getCurrentPosition((res) => {
      //   console.log('定位结果：',res)
      // })

      // this.getDevicePoint()
    },
    getPoint() {
      const p = { lng: this.longitude, lat: this.latitude }
      this.point = p
      if (!this.isClickGetLngLat) {
        this.center = p
      }

      console.log(this.latitude)
    },
    getClickInfo(e) {
      console.log('点击地图：', e)
      // this.center.lng = e.point.lng
      // this.center.lat = e.point.lat
      this.$emit('getPoint', { lng: e.point.lng, lat: e.point.lat })
    },
    onDragend(event) {
      console.log('event', event)
      this.$emit('getPoint', { lng: event.point.lng, lat: event.point.lat })
    },
    getDevicePoint() {
      this.$get('http://api.map.baidu.com/geocoder/v2/', {
        ak: 'o5TS61Nkhmnga4NTQd0Bj052lxzST8bo',
        output: 'json',
        address: this.deviceLocation
      }).then((res) => {
        console.log('res：', res)
        if (res.status === 200) {
          const result = res.data.result
          this.devicePoint = result.location
          this.center = result.location

          // const pointArray = []
          // pointArray.push(this.devicePoint)
          // console.log('pointArray：',pointArray)
          // var view = this.map.getViewport(pointArray)
          // var mapZoom = view.zoom
          // var centerPoint = view.center
          // console.log('mapZoom：',mapZoom+'；'+'centerPoint：',centerPoint)
          // this.zoom = mapZoom
          // this.center = centerPoint
        } else {
          this.$message({
            message: '找不到该设备位置！',
            type: 'warning',
            duration: 4000
          })
        }
      })

      // const myGeo = new BMap.Geocoder()
      // myGeo.getPoint(this.deviceLocation, (point) => {
      //   console.log('point=', point)
      //   if (point) {
      //     this.devicePoint = point
      //     this.center =point

      //     // myGeo.getLocation(point, (rs) => {
      //     //   console.log('rs：', rs)
      //     // })
      //   } else {
      //   }
      // })
    }
    // toClose() {
    //   this.$emit('close')
    // },
    // toConfirm() {
    //   this.$emit('confirm')
    // }
  }
}
</script>
